<template>
    <div class="app-container">
        <div class="search-tit"><span></span>绩效预发任务创建</div>
        <el-row class="search-box">
            <el-col :span="5">
                当前环节：<span class="per_Status">处理中</span>
            </el-col>
            <el-col :span="5">
                当前处理人：<span class="per_name">王阳明</span>
            </el-col>
        </el-row>

        <el-form ref="form" :model="form" :rules="rules" label-width="105px"  hide-required-asterisk size="medium" :inline="true" class="per_form">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="任务编号:" prop="taskId">
                        <el-input placeholder="请输入任务编号" disabled clearable v-model="form.taskId"></el-input>
                    </el-form-item>
                    <el-form-item label="绩效月份:">
                        <el-date-picker v-model="form.fafMonth" type="month" placeholder="选择绩效月份" clearable>
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="发起部门:">
                        <el-input placeholder="请输入发起部门" clearable v-model="form.OriginateAgency"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="联系人:">
                        <el-input placeholder="请输入联系人" disabled clearable v-model="form.contactName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:">
                        <!--  -->
                        <el-input placeholder="请输入联系电话" disabled clearable v-model="form.contactPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="开始日期:">
                        <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="截至日期:">
                        <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="pre_title">
                    <el-form-item label="标题:" style="width: 100% !important;">
                        <el-input type="textarea" placeholder="请输入标题" clearable v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="事由提要:" style="width: 100% !important;">
                        <el-input type="textarea" placeholder="请输入标题" clearable v-model="form.summary"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="流程:">
                        <el-select v-model="form.ransmission" placeholder="请选择流程" clearable>
                            <el-option v-for="dict in Option1" :key="dict.value" :label="dict.label" :value="dict.label" />
                        </el-select>
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="预发工资计算:">
                        <span style="float: left;margin-right: 20px;">1.预发人员数据</span>
                        <el-upload action="https://httpbin.org/post" ref="upload" :on-preview="handlePreview"
                            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                            :on-exceed="handleExceed" :file-list="fileList" style="float: right;">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="">
                        <span style="float: left;margin-right: 20px;">2.绩效工资标准数据</span>
                        <el-upload action="https://httpbin.org/post" ref="upload" :on-preview="handlePreview"
                            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                            :on-exceed="handleExceed" :file-list="fileList" style="float: right;">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="相关附件:" class="upload-demo">
                        <el-upload action="https://httpbin.org/post" ref="upload" :on-preview="handlePreview"
                            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="6"
                            :on-exceed="handleExceed" :file-list="fileList1">
                            <el-button size="small" type="primary">上传</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item style="width:100%;text-align: right; margin-bottom: 10px;">
                <el-button type="primary" size="mini" @click="submitForm">提交</el-button>
                <el-button type="primary" size="mini" @click="saveForm">保存</el-button>
                <el-button type="primary" size="mini">返回</el-button>
                <!-- @click="resetQuery" -->
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import { getTaskList, delList } from '@/api/taskMgt';

export default {
    name: "Post",
    dicts: ['sys_normal_disable'],
    data () {
        return {
            // 遮罩层
            loading: true,

            // 参数 
            form: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                taskId: "",  //任务编号
                fafMonth: "", //绩效月份
                startDate: "",  //起始日期
                endDate: "",     //截至日期
                approveStatus: "全部",  //任务状态
                OriginateAgency: "",   //机构
                contactName: "",  //联系人
                contactPhone: ""   //联系电话
            },
            Option1: [
                {
                    label: "流程1",
                    value: "0"
                },
                {
                    label: "流程2",
                    value: "1"
                },
                {
                    label: "流程3",
                    value: "2"
                }

            ],
            // 表单校验
            rules: {
                taskId: [
                    { required: true, message: "岗位名称不能为空", trigger: "blur" }
                ],
                fafMonth: [
                    { required: true, message: "岗位编码不能为空", trigger: "blur" }
                ],
                contactName: [
                    { required: true, message: "联系人不能为空", trigger: "blur" }
                ],
                contactPhone: [
                    { required: true, message: "电话号码不能为空", trigger: "blur" }
                ],
                startDate: [
                    { required: true, message: "开始日期不能为空", trigger: "blur" }
                ],
                endDate: [
                    { required: true, message: "截至日期不能为空", trigger: "blur" }
                ],

            },
            fileList: [],
            fileList1: [],
            // fileList: [{ name: '21213.jpg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
            // fileList1: [{ name: '2323223232cdfsdsdfdfdfdfsdsscxcxxcc.txt', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
       
        };
    },
    created () {

    },
    watch: {
        total (n, o) {
            this.queryParams.total = n;


        },

    },
    mounted () {

    },
    methods: {
        /** 提交按钮 */
        submitForm () {
            // this.$refs["form"].validate(valid => {
            //   if (valid) {
            //     if (this.form.postId != undefined) {
            //       updatePost(this.form).then(response => {
            //         this.$modal.msgSuccess("修改成功");
            //         this.open = false;
            //         this.getList();
            //       });
            //     } else {
            //       addPost(this.form).then(response => {
            //         this.$modal.msgSuccess("新增成功");
            //         this.open = false;
            //         this.getList();
            //       });
            //     }
            //   }
            // });
            this.$refs.upload.submit();
        },
        // 保存数据
        saveForm () {

        },
        handleRemove (file, fileList) {
            console.log(file, fileList);
        },
        handlePreview (file) {
            console.log(file);

        },
        handleExceed (files, fileList) {
            this.$message.warning(`当前限制选择${fileList.length}个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            console.log(this.fileList);
        },
        beforeRemove (file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        }


    }
};
</script>
<style scoped lang="scss">
.search-box {
    width: 100%;
    height: 44px;
    background: inherit;
    background-color: rgba(154, 206, 244, 0.24705882352941178);
    box-sizing: border-box;
    border: 1px solid rgba(105, 194, 232, 1);
    display: flex;
    align-items: center;
    padding: 0 45px;
    color: #333333;

    .per_Status {
        color: #3487E9;
    }
}

.search-tit {
    display: flex;
    font-weight: 650;
    font-size: 16px;
    padding: 10px 0 20px;
    box-sizing: border-box;

    span {
        width: 5px;
        height: 17px;
        background-color: rgb(0, 143, 223);
        border: none;
        border-radius: 4px;
        display: inline-block;
        margin-right: 10px;
    }
}

.per_form {
    background-color: rgba(221, 224, 227, 0.30980392156862746);
    border-radius: 6px;
    margin-top: 20px;
    padding: 20px 35px 20px 15px;
    box-sizing: border-box;

}

::v-deep .el-input,
::v-deep .el-input__inner {
    width: 250px !important;
}

::v-deep .pre_title .el-form-item__content {
    width: calc(100% - 105px);
}

::v-deep .pre_title .el-form-item__content .el-input__inner {
    width: 100% !important;
    height: 70px;
}

.upload-demo {
    width: 100% !important;

    .el-form-item__content {
        width: calc(100% - 105px);
        position: relative;
    }

    .el-upload {
        float: left;
    }

    .el-upload-list {
        float: right;
        width: calc(100% - 70px);

        li {
            display: inline-block;
            width: unset;
        }
    }
}
</style>
<style lang="scss">
// .el-form-item__label::after {
//     content: '*';
//     color: #FF0000;
//     margin-left: 4px;
// }

</style>

  